<template>
    <div class="user-container">
        <el-card class="box-card">
            <el-tabs v-model="activeName" type="card">
                <el-tab-pane label="图形模式" name="img">
                    <el-row :gutter="20">
                        <el-col :span="10">
                            <el-card shadow="never">
                                <div slot="header">
                                    <span>权限结构</span>
                                    <el-button style="float: right; padding: 3px 0" type="text" @click="addPermissionBtn">新增权限</el-button>
                                </div>
                                <el-tree
                                    @node-click="handleNodeClick"
                                    :data="permissions"
                                    node-key="permissionId"
                                    ref="tree"
                                    highlight-current
                                    default-expand-all
                                    :check-strictly="true"
                                    show-checkbox
                                    :props="treeProps">
                                </el-tree>
                            </el-card>
                        </el-col>
                        <el-col :span="14">
                            <el-card shadow="never">
                                <div slot="header">
                                    <span>权限表单</span>
                                </div>
                                <!-- 编辑表单 -->
                                <el-form ref="edit-form"
                                         :model="editForm"
                                         :rules="valid"
                                         label-width="120px">
                                    <el-form-item label="权限名称：" prop="permissionName">
                                        <el-input v-model="editForm.permissionName"></el-input>
                                    </el-form-item>
                                    <el-form-item label="类型：">
                                        <el-select v-model="editForm.permissionType" placeholder="请选择权限类型"  :disabled="isEdit">
                                            <el-option label="菜单" value="菜单"></el-option>
                                            <el-option label="功能" value="功能"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="权限等级：">
                                        <el-select v-model="editForm.permissionRank" placeholder="请选择权限等级">
                                            <el-option v-if="editForm.permissionType === '菜单'" label="1" :value="1"></el-option>
                                            <el-option v-if="editForm.permissionType === '菜单'" label="2" :value="2"></el-option>
                                            <el-option v-if="editForm.permissionType === '功能'" label="3" :value="3"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="url：">
                                        <el-input v-model="editForm.permissionUrl"></el-input>
                                    </el-form-item>
                                    <el-form-item label="父类：">
                                        <el-select v-model="editForm.parentId" placeholder="请选择父类">
                                            <el-option
                                                v-for="item in parentPermissions"
                                                :key="item.permissionId"
                                                :label="item.permissionName"
                                                :value="item.permissionId">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="排序：">
                                        <el-input type="number" v-model="editForm.permissionSort"></el-input>
                                    </el-form-item>
                                    <el-form-item label="说明：">
                                        <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 7}" v-model="editForm.permissionDesc"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="onSave" v-show="isEdit">保存</el-button>
                                        <el-button type="primary" @click="onAdd" v-show="!isEdit">新增</el-button>
                                    </el-form-item>
                                </el-form>
                                <!-- 编辑表单 -->
                            </el-card>
                        </el-col>
                    </el-row>
                </el-tab-pane>
                <el-tab-pane label="表格模式" name="form">

                    <el-card class="box-card">
                        <div slot="header">
                            <!-- 导航 -->
                            <el-breadcrumb separator-class="el-icon-arrow-right">
                                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                                <el-breadcrumb-item>权限管理</el-breadcrumb-item>
                            </el-breadcrumb>
                            <!-- 导航 -->
                        </div>
                        <!-- 查询表单 -->
                        <el-form ref="form" :inline="true" class="searcher-form" :model="form" label-width="100px" size="small">
                            <el-form-item label="权限名称：" >
                                <el-input v-model="form.name"></el-input>
                            </el-form-item>
                            <el-form-item label="权限类型：" >
                                <el-radio-group v-model="form.rank">
                                    <el-radio :label="-1">全部</el-radio>
                                    <el-radio :label="1">一级菜单</el-radio>
                                    <el-radio :label="2">二级菜单</el-radio>
                                    <el-radio :label="3">按钮功能</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item style="margin-left: 50px">
                                <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
                                <el-button type="success" icon="el-icon-plus" @click="toAddPermission">创建权限</el-button>
                            </el-form-item>
                        </el-form>
                        <!-- 查询表单 -->
                    </el-card>

                    <el-card>
                        <div slot="header" class="data-header">
                            <span>筛选出{{totalCount}}条符合条件的数据</span>
                        </div>
                        <!-- 数据表格 -->
                        <el-table
                            v-loading="loading"
                            class="data-form"
                            :data="permissionList"
                            style="width: 100%">
                            <el-table-column
                                width="70"
                                prop="permissionId"
                                label="ID" align="center">
                            </el-table-column>
                            <el-table-column
                                label="权限名" align="center">
                                <template slot-scope="scope">
                                    <el-tag>{{scope.row.permissionName}}</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column
                                width="70"
                                prop="permissionType"
                                label="类型">
                            </el-table-column>
                            <!--                <el-table-column-->
                            <!--                    prop="parentId"-->
                            <!--                    label="父类">-->
                            <!--                </el-table-column>-->
                            <el-table-column
                                prop="permissionDesc"
                                label="描述" align="center">
                            </el-table-column>
                            <el-table-column
                                prop="permissionUrl"
                                label="url" align="center">
                            </el-table-column>
                            <el-table-column label="操作" align="center">
                                <template slot-scope="scope">
                                    <el-button
                                        size="mini"
                                        type="primary"
                                        icon="el-icon-edit" circle
                                        @click="handleEdit(scope.$index, scope.row)"
                                    ></el-button>
                                    <el-button
                                        size="mini"
                                        type="danger"
                                        icon="el-icon-delete" circle
                                        @click="handleDelete(scope.$index, scope.row)"
                                    ></el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!-- 数据表格 -->
                        <!-- 分页 -->
                        <el-pagination
                            background
                            layout="prev, pager, next, sizes, total"
                            @current-change="onChangePage"
                            @size-change="onChangePageSize"
                            :page-sizes="[5, 10, 20, 50]"
                            :page-size="pageSize"
                            :total="totalCount">
                        </el-pagination>
                        <!-- 分页 -->
                    </el-card>
                    </el-tab-pane>
                </el-tabs>
        </el-card>
    </div>
</template>

<script>
    import {
        addPermission,
        getPermissionList,
        queryAllPermissionForRank,
        queryParentPermission,
        updatePermission
    } from '../../api/permission'

    import '../../filter'

    export default {
        name: "PermissionIndex",
        inject:['reload'],         //注入App里的reload方法
        data() {
            return {
                permissions: [],   // 所有权限信息
                treeProps: {
                    children: 'children',
                    label: 'permissionName'
                },
                form: {
                    name: '',
                    rank: -1
                },
                activeName: 'img',
                permissionList: [],   // 数据集合
                page: 1,        // 页码
                pageSize: 10,   // 每页显示多少数据
                totalCount: 0,  // 总数据个数
                loading: false, // 是否正在加载数据
                editForm: {
                    permissionId: '',
                    permissionName: '',
                    permissionType: '',
                    permissionDesc: '',
                    permissionUrl: '',
                    permissionSort: 99,
                    permissionRank: 1,
                    parentId: ''
                },
                isEdit: false,
                parentPermissions: [],
                valid: {                // 表单控件验证
                    permissionName: [
                        {required: true, message: '权限名不能为空', trigger: 'blur'}
                        // {pattern: /^1[3|4|5|7|8][0-9]{9}$/, message: '请输入正确的手机号码格式', trigger: 'blur'}
                    ]
                }
            }
        },
        created() {
            this.loadPermissionList()
            this.loadAllPermissions()
        },
        methods: {
            loadAllPermissions() {
                queryAllPermissionForRank().then(res => {
                    this.permissions = res.data.data
                })
            },
            queryAllParentPermission(rank) {
                queryParentPermission({
                    'rank': rank
                }).then(res => {
                    this.parentPermissions = res.data.data
                })
            },
            //加载用户列表
            loadPermissionList() {
                this.onSearch()
            },
            onSearch() {
                this.loading = true     // 加载数据中
                getPermissionList({
                    'name': this.form.name,
                    'rank': this.form.rank,
                    'page': this.page,
                    'pageSize': this.pageSize
                }).then(res => {
                    const data = res.data.data
                    this.permissionList = data.list
                    this.totalCount = data.total
                })
                this.loading = false    // 加载数据结束
            },
            onChangePage(page) {
                this.page = page
                this.loadPermissionList()
            },
            onChangePageSize(pageSize) {
                this.pageSize = pageSize
                this.loadPermissionList()
            },
            toAddPermission() {
                this.$router.push("/addPermission")
            },
            handleDelete(index,row) {
                // 删除用户
            },
            handleEdit(index,row) {
                // 编辑权限
                this.$router.push({path:'/editPermission',query:{
                    'permissionId': row.permissionId
                }})
            },
            addPermissionBtn() {
                this.isEdit = false
                this.editForm.permissionUrl = ""
                this.editForm.permissionId = ""
                this.editForm.permissionName = ""
                this.editForm.permissionRank = 1
                this.editForm.permissionType = "菜单"
                this.editForm.permissionDesc = ""
                this.editForm.permissionSort = 99
                this.editForm.parentId = ""
            },
            handleNodeClick(data) {
                this.isEdit = true
                this.editForm.permissionUrl = data.permissionUrl
                this.editForm.permissionId = data.permissionId
                this.editForm.permissionName = data.permissionName
                this.editForm.permissionRank = data.permissionRank
                this.editForm.permissionType = data.permissionType
                this.editForm.permissionDesc = data.permissionDesc
                this.editForm.permissionSort = data.permissionSort
                this.editForm.parentId = data.parentId
            },
            onSave() {
                updatePermission({
                    'permissionId': this.editForm.permissionId,
                    'permissionName': this.editForm.permissionName,
                    'permissionRank': this.editForm.permissionRank,
                    'permissionType': this.editForm.permissionType,
                    'permissionUrl': this.editForm.permissionUrl,
                    'parentId': this.editForm.parentId,
                    'permissionSort': this.editForm.permissionSort,
                    'permissionDesc': this.editForm.permissionDesc
                }).then(res => {
                    if(res.data.code == 200){
                        this.$message({
                            message: '保存权限成功',
                            type: 'success'
                        })
                        this.loadAllPermissions()
                    }else{
                        this.$message.error(res.data.msg)
                    }
                })
            },
            onAdd() {
                addPermission({
                    'permissionName': this.editForm.permissionName,
                    'permissionUrl': this.editForm.permissionUrl,
                    'permissionType': this.editForm.permissionType,
                    'permissionRank': this.editForm.permissionRank,
                    'parentId': this.editForm.parentId,
                    'permissionSort': this.editForm.permissionSort,
                    'permissionDesc': this.editForm.permissionDesc
                }).then(res => {
                    if(res.data.code == 200){
                        this.$message({
                            message: '新增权限成功',
                            type: 'success'
                        })
                        this.loadAllPermissions()
                    }else{
                        this.$message.error(res.data.msg)
                    }
                })
            }
        },
        watch: {
            'editForm.permissionRank': {
                handler(newValue,oldValue) {
                    if(newValue === 1){
                        this.form.parentId = null
                    }
                    // 获取父类权限信息
                    this.editForm.permissionRank = newValue
                    this.queryAllParentPermission(newValue)
                },
                immediate: true,     // 属性改变立即执行
                deep: true           // 监测对象属性变化执行
            }
        }
    }
</script>

<style scoped>

</style>
